<template>
  <view class="container">
    <nut-tabs v-model="tab" @change="onTab">
      <nut-tab-pane :title="item.title" :pane-key="item.id" v-for="item in transactionData" :key="item.id">
        <view>{{ item.code }}</view>
      </nut-tab-pane>
    </nut-tabs>
  </view>
</template>

<script lang="ts" setup>
import http from "@/utils/http";
import Taro, { useRouter } from "@tarojs/taro";
import { onMounted, ref } from "vue";
import { IconFont } from "@nutui/icons-vue-taro";
const router = useRouter();
const { type } = router.params;
const tab = ref(1)
console.log("type", type);
const transactionData = ref<any[]>([
    {
      id: 1,
      title: "A券消费码",
      code: "",
      type: "A"
    },
    {
      id: 2,
      title: "B券消费码",
      code: "",
      type: "B"
    }
]);

const onTab = (e) => {
  console.log(e, tab);
  loadData();
}

const loadData = () => { 
    transactionData.value.forEach((item) => {
    if (item.id == tab.value) {
      if(item.code){
        return
      }
      http
      .postQuery(`/api/user/getConsumerCode`, { accountType: item.type })
      .then((res) => {
        console.log("res", res);
        item.code = res.data;
      });
    }
  });
};


onMounted(() => {
    loadData();
//   http
//     .postQuery(`/api/user/getConsumerCode`, { accountType: type })
//     .then((res) => {
//       console.log("res", res);
//       transactionData.value = res.data.map((i) => i.columns);
//       console.log("transactionData", transactionData.value);
//     });
});
</script>

<style lang="scss">
.container {
  background: #fff;
  min-height: 100vh;
  margin: auto;
  width: 700rpx;
  .transaction-list {
    width: 100%;
  }

  .transaction-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
    width: 100%;
  }

  .info-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-right: 20rpx;
  }

  .date {
    font-size: 24rpx;
    color: #999;
    line-height: 34rpx;
    margin-bottom: 8rpx;
  }

  .description {
    font-size: 32rpx;
    font-weight: 500;
  }

  .amount {
    font-size: 28rpx;
    font-weight: 500;
    color: #f00;
  }
  .no-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10rpx;
    min-height: 50vh;
  }
  .meiyoushuju {
    font-size: 28rpx;
    color: #999;
  }
}
</style>
